<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>生命周期</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>
    <div id="react"> </div>
    <!--准备好一个容器-->
    <!--引入react核心库,核心库必须先引入-->
    <script type="text/javascript" src="./js/17.1js/react.development.js"></script>
    <!--引入react-dom, 用于支持react操作DOM-->
    <script type="text/javascript" src="./js/17.1js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="./js/17.1js/babel.min.js"></script>


    <script type="text/babel">






       state={newsArr:[]}

       //组件挂载之前
       componentDidMount(){
            setInterval(() => {
					//获取原状态
					const {newsArr} = this.state
					//模拟一条新闻
					const news = '新闻'+ (newsArr.length+1)
					//更新状态
					this.setState({newsArr:[news,...newsArr]})
				}, 1000);


        }

        //
        getSnapshotBeforeUpdate(){
            return this.refs.list.scrollHeight



        }




        class Life extends React.Component {
             render() {
                return(
                   
                        <ul class="ulone" ref="list">
                          <li className="new">1你好，周杰伦</li> 
                          <li className="new">2你好，周杰伦</li>    
                          <li className="new">3你好，周杰伦</li>    
                          <li className="new">4你好，周杰伦</li>    
                          <li className="new">5你好，周杰伦</li>    
                          <li className="new">6你好，周杰伦</li>       
                        </ul>
                     
                )
             }
            }  
            ReactDOM.render(<Life/>, document.getElementById("react"));
    </script>

    <style>
        .new{
            width: 200px;
            height: 40px;
        }
        .ulone{
            width: 200px;
            height: 150px;
            background: blanchedalmond;
            overflow-y: auto;

        }
    
    </style>

</body>

</html>